<!--
 * @Description: 视频云台控制器
 * @Author: chendingfengmail@163.com
 * @Date: 2021-12-07 13:52:48
 * @LastEditTime: 2022-01-10 17:21:56
 * @LastEditors: chendingfengmail@163.com
 * @Reference: 
-->

<!-- 视频云台控制器 -->
<template>
  <div ref="videoHolder" class="video-holder" id="video-holder">
    <el-row>
      <el-col :span="12">
        <i v-for="(item, i) in 8" :key="i"
          class="direction-buttom on-checked buttom-default-color iconfont icon-fangxiang1"
          :ref="`rotate_${(i - 1) * 45}`" :style="{ transform: `rotate(${(i - 1) * 45}deg)` }"></i>
        <div class="video-rocker" id="video-rocker"></div>
      </el-col>
      <el-col :span="12">
        <div class="video-control">
          <div class="video-control-item">
            <i class="control-button el-icon-remove" @mousedown="videoViewControlStart(12, '焦距减')"
              @mouseup="videoViewControlStop(12, '停止')"></i>
            <span>焦距</span>
            <i class="control-button el-icon-circle-plus" @mousedown="videoViewControlStart(11, '焦距增')"
              @mouseup="videoViewControlStop(11, '停止')"></i>
          </div>
          <div class="video-control-item">
            <i class="control-button el-icon-remove" @mousedown="videoViewControlStart(6, '变倍减')"
              @mouseup="videoViewControlStop(6, '停止')"></i>
            <span>变倍</span>
            <i class="control-button el-icon-circle-plus" @mousedown="videoViewControlStart(5, '变倍增')"
              @mouseup="videoViewControlStop(5, '停止')"></i>
          </div>
          <div class="video-control-item">
            <i class="control-button el-icon-remove" @mousedown="videoViewControlStart(14, '光圈减')"
              @mouseup="videoViewControlStop(14, '停止')"></i>
            <span>光圈</span>
            <i class="control-button el-icon-circle-plus" @mousedown="videoViewControlStart(13, '光圈增')"
              @mouseup="videoViewControlStop(13, '停止')"></i>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="2">
        <span class="setp-label">步长</span>
      </el-col>
      <el-col :span="18">
        <div class="setp-slider">
          <el-slider v-model="stepLength"></el-slider>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import nipplejs from 'nipplejs';
export default {
  name: '',
  props: {
    // 视频code
    videoCode: {
      type: String,
      default: () => {
        return ""
      },
    },
  },
  data() {
    return {
      stepLength: 40, // 步长
      ptzCmd: 0,      // 云台控制命令
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.$nextTick(() => {
      this.videoControl()
    })
  },

  methods: {
    /**
     * 判断数值区间
     * @param {*} str 
     * @param {*} maxnum 
     * @param {*} minnum 
     * @returns 
     */
    isRangeIn(str, maxnum, minnum) {
      var num = parseFloat(str);
      if (num <= maxnum && num >= minnum) {
        return true;
      }
      return false;
    },

    // 视频云台控制
    videoControl() {
      var _this = this;
      var videoControl = nipplejs.create({
        zone: document.getElementById('video-rocker'),
        mode: 'static',//mode: 'semi','dynamic'
        position: { left: '26%', top: '50%' },
        color: '#409EFF',
        size: 120
      });

      //滑动摇杆的事件
      videoControl.on("move", function (evt, data) {
        if (data.distance < 40) {
          return
        }
        let degree = data.angle.degree
        // 摇杆图标颜色切换
        let controlIconColorChange = function (angle) {
          for (const key in _this.$refs) {
            if (key.substring(0, 6) == "rotate") {
              if (!_this.$refs[key][0].classList.contains['buttom-default-color']) {
                _this.$refs[key][0].classList.add("buttom-default-color")
              }
              if (key == `rotate_${angle}`) {
                if (!_this.$refs[key][0].classList.contains['on-checked']) {
                  _this.$refs[key][0].classList.remove("buttom-default-color")
                  _this.$refs[key][0].classList.add("on-checked");
                }
              }
            }
          }
        }

        switch (true) {
          case _this.isRangeIn(degree, 112.5, 67.5):
            // 正上方向
            controlIconColorChange("0")
            if (_this.ptzCmd != 3) {
              _this.ptzCmd = 3;
              _this.ptzControlRequest(1, 3, "正上方向")
            }
            break;
          case _this.isRangeIn(degree, 67.5, 22.5):
            // 右上方向
            controlIconColorChange("45")
            if (_this.ptzCmd != 9) {
              _this.ptzCmd = 9;
              _this.ptzControlRequest(1, 9, "右上方向")
            }
            break;
          case _this.isRangeIn(degree, 22.5, 0) || _this.isRangeIn(degree, 360, 337.5):
            // 正右方向
            controlIconColorChange("90")
            if (_this.ptzCmd != 2) {
              _this.ptzCmd = 2;
              _this.ptzControlRequest(1, 2, "正右方向")
            }
            break;
          case _this.isRangeIn(degree, 337.5, 292.5):
            // 右下方向
            controlIconColorChange("135")
            if (_this.ptzCmd != 10) {
              _this.ptzCmd = 10;
              _this.ptzControlRequest(1, 10, "右下方向")
            }
            break;
          case _this.isRangeIn(degree, 292.5, 247.5):
            // 正下方向
            controlIconColorChange("180")
            if (_this.ptzCmd != 4) {
              _this.ptzCmd = 4;
              _this.ptzControlRequest(1, 4, "正下方向")
            }
            break;
          case _this.isRangeIn(degree, 247.5, 202.5):
            // 左下方向
            controlIconColorChange("225")
            if (_this.ptzCmd != 8) {
              _this.ptzCmd = 8;
              _this.ptzControlRequest(1, 8, "左下方向")
            }
            break;
          case _this.isRangeIn(degree, 202.5, 157.5):
            // 正左方向
            controlIconColorChange("270")
            if (_this.ptzCmd != 1) {
              _this.ptzCmd = 1;
              _this.ptzControlRequest(1, 1, "正左方向")
            }
            break;
          case _this.isRangeIn(degree, 157.5, 112.5):
            // 左上方向
            controlIconColorChange("-45")
            if (_this.ptzCmd != 7) {
              _this.ptzCmd = 7;
              _this.ptzControlRequest(1, 7, "左上方向")
            }
            break;

          default:
            break;
        }
      })
      //停止滑动摇杆的事件
      videoControl.on("end", function (evt, data) {
        for (const key in _this.$refs) {
          if (key.substring(0, 6) == "rotate") {
            _this.$refs[key][0].classList.remove("on-checked");
            _this.$refs[key][0].classList.add("buttom-default-color")
          }
        }
        _this.ptzControlRequest(0, 1, "结束")
        _this.ptzCmd = 0
      });
      videoControl.on("start", function (evt, data) {
        // console.log("鼠标按住了");
      })
    },

    // 视频设备 变倍、焦距、光圈控制 开始
    videoViewControlStart(ptzCmd, ptzCmdDesc) {
      if (this.videoCode == "") {
        this.$ddMessage.warning("请选中需要控制的设备");
        return;
      }
      this.ptzControlRequest(1, ptzCmd, ptzCmdDesc)
    },

    // 视频设备 变倍、焦距、光圈控制 结束
    videoViewControlStop(ptzCmd, ptzCmdDesc) {
      this.ptzControlRequest(0, ptzCmd, ptzCmdDesc)
    },

    // 云台控制请求
    ptzControlRequest(start, ptzCmd, ptzCmdDesc) {
      if (this.videoCode == "" || this.videoCode == null) {
        this.$ddMessage.warning("请选中需要控制的设备");
        return;
      } else {
        let command = {
          start: start,
          ptzCmd: ptzCmd,
          ptzCmdDesc: ptzCmdDesc,
          stepLength: this.stepLength
        }
        this.$emit('ptz-control', this.videoCode, command)
      }

    },
  }
}

</script>
<style lang='scss' scoped>
#video-holder {
  height: 240px;
  width: 348px;
  margin-top: 15px;
  margin-left: 10px;
  box-shadow: 0px 0px 10px 5px rgb(16 37 80 / 14%);
  border-radius: 10px;

  .direction-buttom {
    width: 16px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    transform-origin: 50% 80px;
    position: absolute;
    left: 24%;
    top: 8%;
  }

  .on-checked {
    color: #409eff;
  }

  .buttom-default-color {
    color: #c1d6ea;
  }

  #video-rocker {
    height: 188px;

    .front {
      background-color: #fff;
      user-select: none; //加这个属性是因为元素总是会被选中，会比较影响使用体验
    }

    .back {
      background-size: cover;
      user-select: none;
    }
  }

  .video-control {
    padding-top: 20px;

    .video-control-item {
      text-align: center;
      padding: 10px;
      font-size: 22px;

      span {
        margin: 0px 20px;
      }

      .control-button {
        cursor: pointer;
        color: #409eff;
      }
    }
  }

  .setp-label {
    display: block;
    font-size: 22px;
  }

  .setp-slider {
    padding-right: 20px;
  }
}
</style>